/*柱状图
 * 
 * titleName : 图形title
 * 
 * xData :x轴数据
 * xName:x轴名称
 * yDataMap:y轴数据
 * chartDivID:图形填充div ID名称
 * rotateNum:x轴文字倾斜度数
 * 
 * */
function makeBarPicture(titleName,xData,xName,yDataMap,chartDivID,rotateNum){
	var seriesInfo =new Array();
    if(yDataMap != undefined){
        $.each(yDataMap, function(key,value) {
            var seriesItem={
            		name:key,
		            type:'bar',
		            barWidth: '20',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top',
		                    textStyle : {
		                    	color : '#000',
		                    	fontWeight:'bold',
		                    	fontSize:'14'
		                    }
		                }
		            },
		            data:value
            };
            seriesInfo.push(seriesItem);
        });
    }
	option = {
		    color: ['#5fb6c7'],
		    title: {
		        text: titleName,
		        left : 'left'
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    tooltip : {
		    	link: {xAxisIndex: 'all'},
	            label: {
	                backgroundColor: '#777'
	            },
	            formatter: '{b0}: {c0}'
		    	
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '5%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            //name : xName,
		            data : xData,
		            splitLine: {lineStyle:{type:'dashed'}},
		            axisLabel: {
						interval: 0,
						rotate: rotateNum,
					}
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : seriesInfo
		}
	var myChart = echarts.init(document.getElementById(chartDivID));
	if(xData == ""){
		myChart.showLoading({
		    text : '暂无数据',
		    textStyle : {
		        fontSize : 30
		    },
		  color: 'rgba(255, 255, 255, 0.8)',
		  textColor: '#000',
		  maskColor: 'rgba(255, 255, 255, 0.8)',
		  zlevel: 0
		});
	}
	myChart.setOption(option, true);
	return myChart;
}


/*折线图
 * 
 * xData :x轴数据
 * yData :y轴数据
 * xName:x轴名称
 * yName:y轴名称
 * chartDivID:图形填充div ID名称
 * 
 * */

function makeLinePic(titleName,xData,xName,legend,yDataMap,chartDivID){
	var seriesInfo =new Array();
    if(yDataMap != undefined){
        $.each(yDataMap, function(key,value) {
            if(value != ""){
            	var seriesItem={
            			name:key,
            			type:'line',
            			smooth: true,
            			itemStyle: {
	                        normal: {
	                            lineStyle: {        // 系列级个性化折线样式
	                                width: 1.5
	                            }
	                        }
            			},
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fff5f3'
                                }, {
                                    offset: 1,
                                    color: '#fff5f3'
                                }])
                            }
                        },
     	                data:value
	            };
	            seriesInfo.push(seriesItem);
            }
        	
        });
    }
	option = {
		    title: {
		        text: titleName,
		        left : 'left'
		    },
		    tooltip : {
		        trigger: 'axis'
		    },
		    legend: {
		       data : legend,
		       top : '30px'
		    },
		    toolbox: {
				show: true,
				feature: {
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
		    },
			grid: {
				left: '3%',
				right: '4%',
				bottom: '5%',
				containLabel: true
			},
			dataZoom: [
				{
					show: true,
					realtime: true,
					xAxisIndex: 0
				},
				{
					type: 'inside',
					realtime: true,
					xAxisIndex: 0
				}
			],
			calculable : true,
		    xAxis : [
		 	        {
		 	            type : 'category',
		 	            boundaryGap : false,
		 	            splitLine: {lineStyle:{type:'dashed'}},
		 	            data :xData
		 	        }
		 	    ],
		    yAxis : [
		        {
		            type : 'value',
		        }
		    ],
		    series : seriesInfo
		};
	var myChart = echarts.init(document.getElementById(chartDivID));
	if(seriesInfo == ""){
		myChart.showLoading({
		    text : '暂无数据',
		    textStyle : {
		        fontSize : 30
		    },
		  color: 'rgba(255, 255, 255, 0.8)',
		  textColor: '#000',
		  maskColor: 'rgba(255, 255, 255, 0.8)',
		  zlevel: 0
		});
	}
	myChart.setOption(option, true);
	return myChart;
}


/*pictorialBar 横向柱状图
 * 
 * xData :x轴数据
 * yData :y轴数据
 * xName:x轴名称
 * yName:y轴名称
 * chartDivID:图形填充div ID名称
 * 
 * */

function makePictorialBarPic(titleName,xData,xName,yData,chartDivID){
	var seriesInfo1 =new Array();
	var seriesInfo2 =new Array();
    if(xData != undefined){
        $.each(xData, function(index,value) {
            var seriesItem1={
            	 value:value,
            	 animationDuration: 0
            };
            var seriesItem2={
               	 value:value,
               	 symbolClip: true
               };
            seriesInfo1.push(seriesItem1);
            seriesInfo2.push(seriesItem2);
        });
    }
	option = {
	    xAxis: {
	        splitLine: {show: true},
	        axisLine: {
	            lineStyle: {
	                color: '#00a0ea'
	            }
	        },
	        axisLabel: {
	            margin: 5
	        }
	    },
	    yAxis: {
	        data: yData,
	        splitLine: {
	            show: false
	        },
	        inverse: true,
	        axisTick: {show: false},
	        axisLine: {show: false},
	        axisLabel: {
	            margin: 10,
	            textStyle: {
	                fontSize: 12
	            }
	        }
	    },
	    tooltip : {
	    	link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: '#777'
            }
	    },
	    grid: {
	    	left: '20%',
	    	bottom:'20'
	    },
	    xAxis: {
	        type : 'value',
	        position: 'top',
	        splitLine: {lineStyle:{type:'dashed'}},
	    },
	    toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    series: [{
	        type: 'pictorialBar',
	        symbol: 'rect',
	        itemStyle:{
	                normal:{
	                    color:'#abce5b',
	                    borderColor:'#e5e5e5'
	                }
	            },
	        z: 100,
	        barWidth:'15',
	        data: seriesInfo2
	    }, 
	      {
	        type: 'pictorialBar',
	        symbol: 'rect',
	        itemStyle:{
	                normal:{
	                    color:'white',
	                    borderColor:'black',
	                }
	            },
	        barWidth:'15',
	        label: {
	            normal: {
	                show: true,
	                position: 'outside',
	                formatter: '{c}',
	                textStyle: {
	                    color: '#bb0004'
	                }
	            }
	        },
	        data: seriesInfo1,
	    }]
	};
	var myChart = echarts.init(document.getElementById(chartDivID));
	if(xData == ""){
		myChart.showLoading({
		    text : '暂无数据',
		    textStyle : {
		        fontSize : 30
		    },
		  color: 'rgba(255, 255, 255, 0.8)',
		  textColor: '#000',
		  maskColor: 'rgba(255, 255, 255, 0.8)',
		  zlevel: 0
		});
	}
	myChart.setOption(option,true);
	return myChart;
}



/*饼状图
 * 
 * titleName  标题
 * subName 子标题
 * legend
 * data :数据
 * chartDivID:图形填充div ID名称
 * 
 * */

function makePiePic(titleName,subName,legend,data,chartDivID){
	var seriesInfo =new Array();
    if(data != undefined){
        $.each(data, function(key,value) {
            var seriesItem={
            	 value:value,
            	 name:key
            };
            seriesInfo.push(seriesItem);
        });
    }
    option = {
    	    title : {
    	        text: titleName,
    	        subtext: subName,
    	        x:'left'
    	    },
    	    legend: {
    	    	 x : 'center',
    	         y : 'bottom',
    	        data: legend
    	    },
    	    toolbox: {
    		        feature: {
    		            saveAsImage: {}
    		        }
    		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
    	    series : [
    	        {
    	            name: '访问来源',
    	            type: 'pie',
    	            radius : '55%',
    	            center: ['50%', '60%'],
    	            label:{
    	            	normal : {
    		            	 formatter: '{d}%'
    		            	}
    	            	},
    	            data:seriesInfo,
    	            itemStyle: {
    	                emphasis: {
    	                    shadowBlur: 10,
    	                    shadowOffsetX: 0,
    	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
    	                }
    	            }
    	        }
    	    ]
    	};
	var myChart = echarts.init(document.getElementById(chartDivID));
	if(data == "" || seriesInfo == ""){
		myChart.showLoading({
		    text : '暂无数据',
		    textStyle : {
		        fontSize : 30
		    },
		  color: 'rgba(255, 255, 255, 0.8)',
		  textColor: '#000',
		  maskColor: 'rgba(255, 255, 255, 0.8)',
		  zlevel: 0
		});
	}
	myChart.setOption(option, true);
	return myChart;
}

